<template>
  <view class="return-request">
    <!-- 进度条导航（适配iPhone6/7/8并居中） -->
    <view class="progress-nav-container">
      <scroll-view class="progress-nav" scroll-x="true" scroll-with-animation>
        <view 
          v-for="(step, index) in progressSteps" 
          :key="index"
          class="nav-step"
          :class="{ 'active': index <= currentStep }"
        >
          <view class="step-content">
            <text class="step-text">{{ step }}</text>
          </view>
          <view v-if="index < progressSteps.length - 1" class="step-arrow">></view>
        </view>
      </scroll-view>
    </view>

    <!-- 当前步骤内容 -->
    <view class="step-content-area">
      <view v-if="currentStep === 0" class="step-panel">
        <text class="step-title">选择要换货的商品和数量</text>
        
        <!-- 商品列表 -->
        <view class="product-list">
          <view 
            class="product-item" 
            v-for="(product, index) in products" 
            :key="index"
          >
            <view class="product-select">
              <view 
                class="radio-button"
                :class="{ 'checked': product.selected }"
                @click="toggleProduct(index)"
              >
                <view v-if="product.selected" class="radio-inner"></view>
              </view>
            </view>
            
            <image :src="product.imageUrl" class="product-image"></image>
            
            <view class="product-info">
              <text class="product-name">{{ product.name }}</text>
              <text class="product-attr">{{ product.attr }}</text>
              <text class="product-price">¥ {{ product.price }}</text>
            </view>
            
            <view class="quantity-control">
              <button 
                class="quantity-btn minus"
                @click="decreaseQuantity(index)"
                :disabled="product.quantity <= 1"
              >-</button>
              <text class="quantity-text">{{ product.quantity }}</text>
              <button 
                class="quantity-btn plus"
                @click="increaseQuantity(index)"
                :disabled="product.quantity >= product.maxQuantity"
              >+</button>
            </view>
          </view>
        </view>
        
        <!-- 全选和合计 -->
        <view class="select-all-section">
          <view class="select-all" @click="toggleSelectAll">
            <view 
              class="radio-button"
              :class="{ 'checked': allSelected }"
            >
              <view v-if="allSelected" class="radio-inner"></view>
            </view>
            <text class="select-all-text">全选</text>
          </view>
          <view class="total-amount">
            合计 ¥ {{ totalAmount.toFixed(2) }}
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <button 
        class="action-btn next-btn"
        @click="nextStep"
        :disabled="!canProceed"
      >
        下一步
      </button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        currentStep: 0,
        progressSteps: ['提交申请', '申请原因', '客服受理', '寄回商品', '官方收货', '完成换货'],
        products: [
          {
            id: 1,
            name: '钩花蕾丝衬衣',
            imageUrl: '/static/c2.png',
            attr: '商品属性',
            price: 168,
            quantity: 1,
            maxQuantity: 100,
            selected: false
          },
          {
            id: 2,
            name: '甜美V领荷叶袖T恤',
            imageUrl: '/static/c3.png',
            attr: '商品属性',
            price: 158,
            quantity: 1,
            maxQuantity: 100,
            selected: false
          }
        ],
        allSelected: false
      }
    },
    computed: {
      selectedCount() {
        return this.products.filter(product => product.selected).length;
      },
      totalAmount() {
        return this.products
          .filter(product => product.selected)
          .reduce((total, product) => total + (product.price * product.quantity), 0);
      },
      canProceed() {
        return this.selectedCount > 0;
      }
    },
    methods: {
      toggleProduct(index) {
        this.products[index].selected = !this.products[index].selected;
        this.updateSelectAllStatus();
      },
      increaseQuantity(index) {
        if (this.products[index].quantity < this.products[index].maxQuantity) {
          this.products[index].quantity++;
        }
      },
      decreaseQuantity(index) {
        if (this.products[index].quantity > 1) {
          this.products[index].quantity--;
        }
      },
      toggleSelectAll() {
        this.allSelected = !this.allSelected;
        this.products.forEach(product => {
          product.selected = this.allSelected;
        });
      },
      updateSelectAllStatus() {
        this.allSelected = this.products.every(product => product.selected);
      },
      nextStep() {
        if (!this.canProceed) {
          uni.showToast({
            title: '请选择要换货的商品',
            icon: 'none'
          });
          return;
        }
        uni.navigateTo({
          url: '/pages/yzmHReasonPage/yzmHReasonPage',
          success: () => {
            this.currentStep = 1;
          }
        });
      }
    }
  }
</script>

<style>
/* iPhone6/7/8适配样式 */
page {
  background-color: #f5f5f5;
  font-size: 14px;
}
ti
.return-request {
  min-height: 100vh;
  padding-bottom: 100px;
  box-sizing: border-box;
}

/* 进度条导航容器（关键修改） */
.progress-nav-container {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 15px 0;
  display: flex;
  justify-content: center;
}

.progress-nav {
  width: 375px; /* iPhone6/7/8宽度 */
  height: 40px;
  white-space: nowrap;
}

.nav-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 100%;
  position: relative;
}

.step-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.step-text {
  font-size: 12px;
  color: #999;
  text-align: center;
  line-height: 1.2;
  padding: 0 3px;
}

.nav-step.active .step-text {
  color: #ff4757;
  font-weight: 500;
}

.step-arrow {
  margin: 0 2px;
  color: #ddd;
  font-size: 10px;
}

/* 其他样式优化 */
.step-content-area {
  padding: 15px;
}

.step-panel {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.step-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 15px;
  display: block;
}

.product-list {
  margin-bottom: 15px;
}

.product-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.product-select {
  margin-right: 8px;
}

.radio-button {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-button.checked {
  border-color: #ff4757;
  background-color: #ff4757;
}

.radio-inner {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #fff;
}

.product-image {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  margin-right: 10px;
  object-fit: cover;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: 13px;
  color: #333;
  margin-bottom: 4px;
  line-height: 1.4;
}

.product-attr {
  font-size: 11px;
  color: #999;
  margin-bottom: 4px;
}

.product-price {
  font-size: 13px;
  color: #ff4757;
  font-weight: 500;
}

.quantity-control {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.quantity-btn {
  width: 24px;
  height: 24px;
  border: 1px solid #ddd;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #333;
  padding: 0;
}

.quantity-btn:disabled {
  color: #ccc;
  cursor: not-allowed;
}

.quantity-text {
  margin: 0 8px;
  font-size: 13px;
  color: #333;
  min-width: 20px;
  text-align: center;
}

.select-all-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid #eee;
}

.select-all {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.select-all-text {
  margin-left: 8px;
  font-size: 13px;
  color: #333;
}

.total-amount {
  font-size: 15px;
  color: #ff4757;
  font-weight: 500;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 15px;
  background-color: #fff;
  border-top: 1px solid #eee;
}

.action-btn {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.next-btn {
  background-color: #ff4757;
  color: #fff;
}

.next-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>